<template>
  <div class="login">
    <el-row>
      <el-form label-width="50px" :model="loginData" label="LOGIN">
        <h4>Tagtime Login</h4>
        <el-form-item label="User" class="user">
          <el-input placeholder="请输入账号" v-model="loginData.name" />
        </el-form-item>
        <el-form-item label="Pwd" class="pwd">
          <el-input v-model="loginData.password" type="password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="subFun" class="sub-btn" plain>Register</el-button>
        </el-form-item>
      </el-form>
      
     
    </el-row>
    <div class="foot">
        <a href="#" @click="open1">用户注册</a>
        <a href="#" @click="open2">联系邮箱</a>
        <a href="#" @click="open3">测试员</a>
        <a href="#" @click="open4">赞助商</a>
      </div>

  </div>
</template>


<script  setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { h } from 'vue'
import { ElNotification } from 'element-plus'

// 引入login方法

import { login1 } from '../http/api.js'
// 路由跳转
import router from '../router/index.js'

let loginData = reactive({
  name: '',
  password: '',
})
const subFun = () => {
  // 判断账号密码输入
  // if (loginData.name != "root" || loginData.password != "root") {
  //   ElMessage.error('账号和密码错误');
  //   return
  // } else {
  //   ElMessage.success('登录成功')
  //   router.push('/index')
  //   // 登录成功存一个身份token
  //   localStorage.setItem('token', '200')

  // }
  login1(loginData).then(res => {
    console.log(res)
    if (res.code == 200){
      ElMessage.success(loginData.name + res.msg);
      router.push('/index')
    }
    else{
      ElMessage.error('亲，您的账号密码有误哦');
    }
   
  })
}

const open1 = () => {
  ElNotification({
    title: '用户注册',
    message: h('i', { style: 'color: teal' }, '仅限内部使用，用户注册请联系开发者'),
  })
}
const open2 = () => {
  ElNotification({
    title: '联系邮箱',
    message: h('i', { style: 'color: teal' }, '250xxxxx@qq.com'),
  })
}
const open3 = () => {
  ElNotification({
    title: '测试员',
    message: h('i', { style: 'color: teal' }, 'bd方方'),
  })
}
const open4 = () => {
  ElNotification({
    title: '老板们，2023发大财',
    message: h('i', { style: 'color: red' }, '谢老板，张老板，卢老板'),
  })
}


</script>

<style scoped>
@import '../assets/css/resets.css';
@import '../assets/css/f.css';
.body{
  color: black;
}
.el-form {
  width: 90%;
  margin: 75px auto;
  padding-right: 4vh;
}
.el-input{
  height: 3em;
}
.user /deep/ .el-form-item__label{
        color:wheat;
        line-height: 40px;
        height: 40px;
    }

.pwd /deep/ .el-form-item__label{
    color: wheat;
    line-height: 40px;
    height: 40px;
}




.login {
  background-color: cadetblue;
  height: 100vh;

}

h4 {
  text-align: center;
  font-family: pj;
  font-size: 2rem;
  color: #f5b1f7;
  margin-left: 4vh;
  margin-bottom: 5vh;
}

.sub-btn {
  width: 100%;
  text-align: center;
  height: 4em;
  margin-top: 2em;
  background-color: #065b5e;
}
.foot{
  width: 100%;
  position: absolute;
  bottom: 2vh;
  left: 0vh;
  border-top: 1px solid white;;
  padding-top: 2vh;
}
.foot a{
  color: white;
  font-size: 2vh;
  margin-left: 2vh;
  
}
</style>